{% spaceless %}

<div id="content">

<div class="posttitle">Exercise Log</div>

<div class="postcontent">

     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script type="text/javascript">
       google.load('visualization', '1', {packages: ['corechart']});
     </script>
     <script type="text/javascript">
       function drawVisualizationRecents() {
         var data = google.visualization.arrayToDataTable([
           ['Year', 'Hours'], {% for message in messages_recents %} [ '{{ message.key }}', {{ message.sum }} ] {% if not message.last %} , {% endif %} {% endfor %}
         ]);

         var comboChart = new google.visualization.ComboChart(document.getElementById('chart_div_recents'));
         comboChart.draw(data, {
           title : 'Exercise Log (Recents)',
           vAxis: { title: "Hours" },
           tooltipTextStyle :  { fontName: '나눔고딕' }, 
           seriesType: "bars"
         });
       }

       function drawVisualizationAll() {
         var data = google.visualization.arrayToDataTable([
           ['Year', 'Hours'], {% for message in messages %} [ '{{ message.key }}', {{ message.sum }} ] {% if not message.last %} , {% endif %} {% endfor %}
         ]);

         var comboChart = new google.visualization.ComboChart(document.getElementById('chart_div_all'));
         comboChart.draw(data, {
           title : 'Exercise Log (All)',
           vAxis: { title: "Hours" },
           tooltipTextStyle :  { fontName: '나눔고딕' }, 
           seriesType: "bars"
         });
       }
       google.setOnLoadCallback(drawVisualizationRecents);
       google.setOnLoadCallback(drawVisualizationAll);
     </script>

<div id="chart_div_recents" style="width: 600px; height: 350px;"></div>
<div id="chart_div_all" style="width: 600px; height: 350px;"></div>

</div>

</div>

{% endspaceless %}

